<!--
 * @Author: liubei
 * @Date: 2021-12-31 14:21:11
 * @LastEditTime: 2022-01-01 20:52:38
 * @Description: 
-->
<!-- 开始分析 html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 分析样式表 -->
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>

    <!-- 暂停分析 html，下载样式表、分析样式表 -->
    <link rel="stylesheet" href="/timeout-style.css?timeout=0.05">
    <!-- css 的 load 事件触发 -->
</head>

<body>
    <div style="width: 49%; height: 300px; background-color: red; float: left;"></div>
    <!-- 计算脚本（编译脚本、执行脚本） -->
    <script>
        function postEntries() {
            var myHeaders = new Headers();
            myHeaders.append("Content-Type", "application/json");

            var raw = JSON.stringify(performance.getEntries());

            var requestOptions = {
                method: 'POST',
                headers: myHeaders,
                body: raw,
                redirect: 'follow'
            };

            fetch("/entries", requestOptions)
                .then(response => response.text())
                .then(result => console.log(result))
                .catch(error => console.log('error', error));
        }

        window.addEventListener('load', function handleLoad() {
            console.log('load')

            setTimeout(postEntries, 3000)
        })

    </script>
    <!-- 暂停分析 html，等待资源下载、重新计算样式、布局、画图（首次渲染完成） -->
    <!-- 计算脚本（编译脚本、执行脚本） -->
    <script src="/timeout-script.js?timeout=2"></script>
    <!-- js 的 load 事件触发 -->
    <div style="width: 49%; height: 300px; background-color: green; float: right;"></div>
</body>

<!-- 结束分析 html -->
<!-- 重新计算样式 -->
<!-- readystatechange -->
<!-- 事件 DOMContentLoaded -->
<!-- readystatechange -->
<!-- 事件 load -->
<!-- 布局 -->
<!-- 画图 -->
<!-- 复合层 -->
</html>